<template>
	<view>
		<navbar title="身份验证" :opacity="1" :isbg="false" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__form">
				<view class="con__form__item">
					<view class="con__form__item__label">
						姓名
					</view>
					<input disabled type="text" class="con__form__item__inp" placeholder="请输入姓名" v-model="form.username" />
					<image src="/static/personal/more1.png" class="con__form__item__right" mode=""></image>
				</view>
				<view class="con__form__item">
					<view class="con__form__item__label">
						身份证
					</view>
					<input disabled type="text" v-model="form.idcard" class="con__form__item__inp" placeholder="请输入身份证号码" />
					<image src="/static/personal/more1.png" class="con__form__item__right" mode=""></image>
				</view>
				<view class="con__b">
					<view class="u-flex u-flex-y-center">
						<view class="con__b__line">

						</view>
						<view class="con__b__ti">
							请拍摄并上传你的身份证照片
						</view>
					</view>
					<view class="u-flex u-flex-y-center u-flex-between" style="margin-top: 34rpx;">
						<view class="" @click="upsfz('idcard_faceimage')">
							<image :src="URL(form.idcard_faceimage)" v-if='form.idcard_faceimage' class="con__b__szf" mode="aspectFill"></image>
							<image src="/static/personal/szm.png" v-else class="con__b__szf" mode=""></image>
						</view>
						<view class="" @click="upsfz('idcard_backimage')">
							<image :src="URL(form.idcard_backimage)" v-if='form.idcard_backimage' class="con__b__szf" mode="aspectFill"></image>
							<image src="/static/personal/szm.png" v-else class="con__b__szf" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<u-gap bgColor="#F5F5F5" height="30rpx"></u-gap>
			<view class="box">
				<view class="u-flex u-flex-y-center">
					<view class="con__b__line">

					</view>
					<view class="con__b__ti">
						拍摄身份证要求
					</view>
				</view>
				<view class="box__t">
					大陆公民持有的本人有效二代身份证；</br>
					拍摄时确保身份证<text style="color: #DE4E4A;">边框完整，字体清晰，亮度均匀</text>；
				</view>
				<view class="u-flex u-flex-y-center u-flex-between">
					<image class="box__p" :src="'/static/personal/syq'+index+'.png'" v-for="(item,index) in 4"
						:key="index" mode="">
					</image>

				</view>
			</view>
		</view>
		<!-- <view class="footer">
			<u-button color="#3262FD"
				:customStyle='{width:"690rpx",height:"94rpx",margin:0,padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'>确认</u-button>
		</view> -->
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				form: {}
			};
		},
		onLoad() {
			this.form=uni.getStorageSync('dkuserinfo')
		},
		methods:{
			upsfz(type){
				let _this=this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title:'正在上传'
						})
						uni.uploadFile({
							url: 'http://dn.fuliaoxx.com/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							header: {
								token: uni.getStorageSync('dktoken') || ''
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								if (res.code == 1) {
									_this.form[type]=res.data.url
									user.profile(this.form).then(res1=>{
										uni.hideLoading()
										if (res1.data.code == 1) {
											uni.$u.toast('上传成功')
										}
									})
									
								} else if (res.code == 401) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/login'
										})
									}, 2000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.con {
		border-top: 2rpx solid #FCFCFD;

		&__form {
			border-bottom: 2rpx solid #F5F5F5;
			padding: 24rpx 30rpx 45rpx;

			&__item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 34rpx 0 34rpx 4rpx;

				&__label {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 31rpx;
				}

				&__inp {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 31rpx;
					text-align: right;
					flex: 1;

					.uni-input-placeholder {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #A1A4AA;
					}
				}

				&__right {
					width: 12rpx;
					height: 21rpx;
					margin-left: 26rpx;
				}
			}
		}

		&__b {
			margin-top: 26rpx;

			&__line {
				width: 7rpx;
				height: 28rpx;
				background: #3262FD;
				margin-right: 13rpx;
			}

			&__ti {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #0D0D0D;
				line-height: 32rpx;
			}

			&__szf {
				width: 324rpx;
				height: 279rpx;
				border-radius: 10rpx;
			}
		}
	}

	.box {
		padding: 42rpx 30rpx;

		&__t {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #888888;
			line-height: 36rpx;
			margin: 24rpx 0 40rpx;
		}

		&__p {
			width: 160rpx;
			height: 147rpx;
		}
	}

	.footer {
		padding: 45rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>